<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      ul {
        list-style: none;
      }

      .box {
        width: 600px;
        margin: 100px auto;
        border: 1px solid #000;
        padding: 20px;
      }

      textarea {
        width: 450px;
        height: 160px;
        outline: none;
        resize: none;
      }

      ul {
        width: 450px;
        padding-left: 80px;
      }

      ul li {
        line-height: 25px;
        border-bottom: 1px dashed #cccccc;
        display: none;
      }

      input {
        float: right;
      }

      ul li a {
        float: right;
      }
    </style>
    <script src="../jquery.min.js"></script>
    <script>
      $(function () {
        const $btn = $('#weibo > .btn')
        const $txt = $('#weibo > .txt')
        const $ul = $('#weibo > ul')

        $btn.on('click', function () {
          // 获取输入框中的内容，并去除前后空格
          const value = $txt.val().trim()

          // 做数据判断
          if (!value) return

          // 创建 li 元素
          const $li = $(`<li>${value}<a href="javascript:;">删除</a></li>`)
          // 追加到ul最前面（子元素）
          $ul.prepend($li)
          // 向下滑出显示
          $li.slideDown()
          // 清空输入框内容
          $txt.val('')
        })

        // 用事件代理去监听ul下a标签的点击
        $ul.on('click', '> li > a', function () {
          // this 是 a，要删的是 li，要根据 a 去找 li
          $(this)
            .parent()
            .slideUp(function () {
              $(this).remove()
            })

          //   slideUp 函数声明的伪代码（实参的兼容处理）
          //   function slideUp(duration, complete) {
          //     if (duration === undefined) {
          //         duration = 200 // 给个默认值
          //     }
          //     if (typeof duration === 'function') {
          //         // 说明在调用时，传递的是函数，是函数，那肯定就是回调函数
          //         complete = duration
          //         duration = 200 // 默认持续时间
          //     }
          //   }
        })
      })
    </script>
  </head>

  <body>
    <div class="box" id="weibo">
      <span>微博发布</span>
      <textarea name="" class="txt" cols="30" rows="10"></textarea>
      <button class="btn">发布</button>
      <ul></ul>
    </div>
  </body>
</html>
